<template>
    <div class="min-h-screen bg-gray-50 flex items-center justify-center p-6">
        <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-lg">
            <h1 class="text-2xl font-semibold text-center text-gray-800 mb-6">
                Vue 3 + Tailwind CSS 示例
            </h1>

            <!-- 输入框和按钮 -->
            <div class="mb-4">
                <label for="name" class="block text-sm font-medium text-gray-700">用户名</label>
                <input type="text" id="name" v-model="username" placeholder="请输入用户名"
                    class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
            </div>

            <button @click="submitForm"
                class="w-full bg-blue-500 text-white py-2 rounded-md shadow-md hover:bg-blue-600 transition duration-200">
                提交
            </button>

            <!-- 显示用户名 -->
            <p v-if="submitted" class="mt-4 text-center text-gray-600">欢迎, {{ username }}!</p>

            <div class="text-[16px]">vue3 + Tailwind CSS 示例</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('');
const submitted = ref(false);

const submitForm = () => {
    if (username.value) {
        submitted.value = true;
    } else {
        alert('请输入用户名');
    }
}

</script>

<style scoped>
/* 这里的样式是自定义的，如果需要的话 */
</style>